<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>血糖列表</title>
    <link rel="stylesheet" href="${assets}/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-table.min.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css">
    <link rel="stylesheet" href="${frames}/Chronic/css/headBase.css">
    <link rel="stylesheet" href="${frames}/Chronic/css/ChronicBaseIndex.css">
    <link rel="stylesheet" href="${frames}/Chronic/css/planBase.css">
    <link rel="stylesheet" href="${newframe}/css/select2.min.css" type="text/css">
    <style>
        .select2-container {
            width: 100% !important;
        }
    </style>
    <script src="${assets}/js/jquery-1.9.1.min.js"></script>
    <script src="${assets}/js/bootstrap.min.js"></script>
    <script src="${frames}/js/lib/bootstrap-table.js"></script>
    <script src="${frames}/js/lib/bootstrap-table-zh-CN.js"></script>
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="${newframe}/js/select2.full.zh.js"></script>
    <%-- <script src="${frames}/Chronic/js/ChronicIndex.js" type="text/javascript"></script> --%>
</head>
<body>
<div class="wrap">
    <div class="header">
            <span class="logo">
                <img src="${frames}/Chronic/ChronicImg/logo.png" alt="美康医卫士">
            </span>
        <div class="loginUser">
            <span class="loginU">登录用户:</span>
            <span class="name">${username}</span>
        </div>

    </div>
    <div class="nav">
        <ul>
            <li><a href="${ctx}/chronic/getBpList?username=${user_name}&&pwd=${pwd}">血压</a></li>
            <li class="nav_cur"><a href="${ctx}/chronic/getBsList?username=${user_name}&&pwd=${pwd}">血糖</a></li>
            <li><a href="${ctx}/chronic/getSmartList?username=${user_name}&&pwd=${pwd}">Smart</a></li>
        </ul>
    </div>
    <div class="body">
        <div class="leftList">
            <%--<input type="button" value="控制血压方案" class="newPlan" data-toggle="modal" data-target="#myModal" onclick="myModal();">--%>
            <h5>用户列表</h5>
            <form action="">
                <label>姓名:</label>
                <input id="name" type="text" placeholder="输入首字母" class="name">
                <input id="btn_search" type="button" value="查询" class="search">
            </form>
            <div>
                <table id="patientTable" data-pagination="true" data-toggle="table" data-click-to-select="true"
                       data-single-select="true" data-height="480">
                    <thead>
                    <tr>
                        <th data-field="name">姓名</th>
                        <th data-field="gender">性别</th>
                        <th data-field="age">年龄</th>
                        <th data-field="drName">医生</th>
                        <%--    <th data-field="state" data-checkbox="true">状态</th>--%>
                        <th data-field="pId" style="display: none">病人id</th>
                    </tr>
                    </thead>
                </table>
            </div>

        </div>
        <div class="tableContent">
            <div class="InContent">
                <div class="list">
                    <div class="listTitle">
                        <h4>血糖异常列表</h4>
                        <input id="btn_msg" type="button" value="血糖提醒" class="message">

                    </div>

                    <table id="abnormalTable" class="abnormalList" data-toggle="table" data-click-to-select="true"
                           data-single-select="true" data-height="229">
                        <thead>
                        <tr>
                            <th data-field="id" data-checkbox="true"></th>
                            <th data-field="realname">姓名</th>
                            <th data-field="testTime">时间</th>
                            <th data-field="testItemName">类型</th>
                            <th data-field="refValue">控制目标</th>
                            <th data-field="testValue">异常值</th>
                            <th data-field="pId" style="display: block">病人id</th>
                        </tr>
                        </thead>
                    </table>
                </div>

                <div class="list">
                    <div class="listTitle">
                        <h4>血糖方案</h4>
                        <input type="button" class="newPlan" value="新增血糖方案" class="message" data-toggle="modal"
                               data-target="#myModal" onclick="newModel();">
                        <input type="button" class="newPlan" value="修改血糖方案" class="message" data-toggle="modal"
                               data-target="#myModal" onclick="myModal();">
                    </div>
                    <table id="bloodTable" class="bloodTable" data-toggle="table" data-click-to-select="true"
                           data-single-select="true" data-height="229">
                        <thead>
                        <tr>
                            <th data-checkbox="true"></th>
                            <th data-field="patientName">姓名</th>
                            <th data-field="drug">药物</th>
                            <th data-field="food">膳食</th>
                            <th data-field="movement">运动</th>
                            <th data-field="smoking">吸烟、饮酒</th>
                            <th data-field="startTime">执行周期</th>
                            <th data-field="endTime">执行周期</th>
                        </tr>
                        </thead>
                    </table>
                </div>

                <div class="remind">
                    <div class="remindTitle">
                        <h4>到期提醒</h4>
                    </div>
                    <table id="remindTable" class="remindTable" data-toggle="table" data-click-to-select="true"
                           data-single-select="true" data-height="229">
                        <thead>
                        <tr>
                            <th data-field="name">姓名</th>
                            <th data-field="gender">性别</th>
                            <th data-field="age">年龄</th>
                            <th data-field="mobile">联系方式</th>
                            <th data-field="planTime">到期日期</th>
                            <th data-field="dueDay">到期天数</th>
                        </tr>
                        </thead>
                    </table>
                </div>

                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
    <!--模态框 tabindex="-1"-->
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">详细内容</h4>
                    </div>
                    <div class="modal-body">
                        <form id="myForm" class="form-horizontal" method="post">
                            <input type="hidden" name="id" id="id">
                            <input type="hidden" name="patientId" id="patientId">
                            <input type="hidden" name="username" value="${user_name}" id="username">
                            <input type="hidden" name="type" id="type" value="1">
                            <input type="hidden">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户信息：</label>
                            <div class="col-sm-8">
                                <input type="text" id="patientName" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">药物：</label>
                            <div class="col-sm-8">
                                <input type="text" id="drug" name="drug" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">膳食：</label>
                            <div class="col-sm-8">
                                <input type="text" id="food" name="food" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">运动：</label>
                            <div class="col-sm-8">
                                <input type="text" id="movement" name="movement" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">吸烟、饮酒：</label>
                            <div class="col-sm-8">
                                <input type="text" id="smoking" name="smoking" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">心理：</label>
                            <div class="col-sm-8">
                                <input type="text" id="psychological" name="psychological" class="form-control">
                            </div>
                        </div>
                        <div class="datepicker">
                            <label style="margin-right:25px">执行周期：</label>
                            <input type="text" class="lay-date" placeholder="选择日期" id="startTime" name="startTime"
                                   onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" readonly>
                            &emsp;到&emsp;
                            <input type="text" class="lay-date" placeholder="选择日期" id="endTime" name="endTime"
                                   onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" readonly>
                        </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="createPlan()">保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function initTablePatient() {
        $('#patientTable').bootstrapTable('destroy');
        $("#patientTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "${URL_CHRONIC_SEARCHPATIENT}", //获取数据的Servlet地址
            //cache: false,
            //striped: true,  //表格显示条纹
            pagination: true, //启动分页
            pageSize: 10,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [5, 10, 15, 20, 25],  //记录数可选列表
            search: false,  //是否启用查询
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    name: $("#name").val()
                };
                return param;
            },
            onClickRow: function (row, $element) {
                $element.addClass('success');//添加当前选中的 success样式用于区别
                $("#patientName").val(row.name);
                $("#patientId").val(row.pId);

                initTableAbnormal(row.pId);
                initTableBlood(row.pId);



            },
            onLoadSuccess: function () {  //加载成功时执行
//            	alert("加载成功");
                //layer.msg("加载成功");
            },
            onLoadError: function () {  //加载失败时执行
                alert("加载数据失败");
                //layer.msg("加载数据失败", {time : 1500, icon : 2});
            }


        });
    }
    function initTableAbnormal(pId) {
        $('#abnormalTable').bootstrapTable('destroy');
        $("#abnormalTable").bootstrapTable({

            method: "get",  //使用get请求到服务器获取数据
            url: "${URL_CHRONIC_SEARCHBSEXP}", //获取数据的Servlet地址
            search: false,  //是否启用查询
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pId: pId
                };
                return param;
            },
            onLoadSuccess: function () {  //加载成功时执行
                //alert("加载成功");
                //layer.msg("加载成功");
            },
            onLoadError: function (data) {  //加载失败时执行
                console.log(data);
                alert("登录超时,请重新请求!");
                //layer.msg("加载数据失败", {time : 1500, icon : 2});
            }
        });
    }

    function initTableBlood(pId) {

        $("#patientId").val(pId);

        $('#bloodTable').bootstrapTable('destroy');
        $("#bloodTable").bootstrapTable({

            method: "get",  //使用get请求到服务器获取数据
            url: "${URL_CHRONIC_TOBLOODMGR}", //获取数据的Servlet地址
            search: false,  //是否启用查询
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pId: pId,
                    type:"1"
                };
                return param;
            },
            onLoadSuccess: function (data) {  //加载成功时执行
                console.log(data);
                //alert("加载成功");
                //layer.msg("加载成功");
            },
            onLoadError: function (data) {  //加载失败时执行
                console.log(data);
                alert("登录超时,请重新请求!");
                //layer.msg("加载数据失败", {time : 1500, icon : 2});
            }
        });
    }


    function initTableRemind() {
        $('#remindTable').bootstrapTable('destroy');
        $("#remindTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "${URL_CHRONIC_SEARCHDUEFOLLOWUPPLAN}", //获取数据的Servlet地址
            search: false,  //是否启用查询
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            /* queryParamsType : "undefined",
             queryParams: function queryParams(params) {   //设置查询参数
             var param = {
             pId : pId
             };
             return param;
             }, */
            onLoadSuccess: function () {  //加载成功时执行
                //alert("加载成功");
                //layer.msg("加载成功");
            },
            onLoadError: function () {  //加载失败时执行
                alert("加载数据失败");
                //layer.msg("加载数据失败", {time : 1500, icon : 2});
            }
        });
    }
    //发送异常血压短信
    function sendMsg() {

    }

    $(document).ready(function () {
        //调用函数，初始化表格
        initTablePatient();
        $('#patientTable').bootstrapTable('hideColumn', 'pId');
        $('#abnormalTable').bootstrapTable('hideColumn', 'pId');
        initTableRemind();
        $(window).resize(function () {
            $('.abnormalList').bootstrapTable('resetView');
            $('.remindTable').bootstrapTable('resetView');
            $('.userMsgTabel').bootstrapTable('resetView');
        });
        $("#btn_search").bind("click", initTablePatient);
        $("#btn_msg").bind("click", sendMsg);
        $('.nav ul li').click(function () {
            $(this).addClass('nav_cur').siblings().removeClass('nav_cur');

        })

    });

    function createPlan() {

        var _startTime = $("#startTime").val();
        var _endTime = $("#endTime").val();
        if (_startTime == null || _startTime == "") {
            alert("请选择开始时间");
        } else if (_endTime == null || _endTime == "") {
            alert("请选择结束时间");
        } else {

            $.ajax({
                url: '${URL_CHRONIC_SAVEBLOOD}',
                type: 'post',
                data: $('#myForm').serialize(),
                async: false, //默认为true 异步
                error: function (data) {
                    console.log(data);
                    alert('error');
                },
                success: function (data) {
                    alert("保存方案成功");
                }
            });
        }
    }

    function newModel() {

        var _patientName = $("#patientName").val();
        if(_patientName == null || _patientName == ""){

            alert("请在用户列表中选择一个用户");
            $(".newPlan").attr("data-target", '');
        }else{

            $("#id").val(null);
            $(".newPlan").attr("data-target", '#myModal');
        }

    }

    function myModal() {


        var checkedArray = getCheckedArray();
        if (checkedArray.length == 0) {
            alert("请勾选一条病人信息");
            $(".newPlan").attr("data-target", '');
        } else {

            $("#id").val(checkedArray[0]);
            $("#patientName").val(checkedArray[1]);
            $("#patientId").val(checkedArray[2]);
            var _id = checkedArray[0];

            $.ajax({
                url: '${URL_CHRONIC_BLOOD}',
                type: 'get',
                data: {"id": _id},
                async: false, //默认为true 异步
                error: function (data) {
                    console.log(data);
                    alert('error');
                },
                success: function (data) {

                    $("#patientName").val(data.data.patientName);
                    $("#id").val(data.data.id);
                    $("#patientId").val(data.data.patientId);
                    $("#drug").val(data.data.drug);
                    $("#food").val(data.data.food);
                    $("#movement").val(data.data.movement);
                    $("#smoking").val(data.data.smoking);
                    $("#psychological").val(data.data.psychological);
                    $("#startTime").val(data.data.startTime);
                    $("#endTime").val(data.data.endTime);

                    $(".newPlan").attr("data-target", '#myModal');
                }
            });

        }

    }


    function getCheckedArray() {
        var checkedArray = [];
        $("#bloodTable input[name='btSelectItem']").each(function () {
            if (this.checked) {

                console.log($("#bloodTable").bootstrapTable('getSelections')[0]);
                var _id = $("#bloodTable").bootstrapTable('getSelections')[0].id;
                var _name = $("#bloodTable").bootstrapTable('getSelections')[0].patientName;
                var _pId = $("#bloodTable").bootstrapTable('getSelections')[0].patientId;
                checkedArray.push(_id);
                checkedArray.push(_name);
                checkedArray.push(_pId);
            }
        });
        return checkedArray;
    }
</script>
</body>
</html>